<html>
<head>
<meta charset="utf-8">
<title>HTML5网页在线代码编辑器</title>
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<link rel="stylesheet" href="codemirror/theme/monokai.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
body {margin: 0;padding: 0;background: #222;}
.Codemirror {width: 100%;height: 100%;font-size: 20px;}
#div_Ver{
	background-color: #FFFFFF;
	height: 50%;
}
</style>
</head>
<body>
<iframe id="div_Ver" style="width: 100%;" ></iframe>
<textarea id="code" name="code">
<h3>Hello World</h3>
<p>漫小猫:WWW.LXBKW.COM</p>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>
    
</div>
<script>


</script></textarea>
</body>
<script src="codemirror/lib/codemirror.js"></script>
<script src="codemirror/addon/edit/closetag.js"></script>
<script src="codemirror/mode/xml/xml.js"></script>
<script src="codemirror/mode/javascript/javascript.js"></script>
<script src="codemirror/mode/css/css.js"></script>
<script src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
				lineNumbers: true,
				mode:  "htmlmixed",
				theme: 'monokai',
				lineWrapping: true,
				indentUnit: 4,         // 缩进单位为4
				styleActiveLine: true, // 当前行背景高亮
			    matchBrackets: true,   // 括号匹配
				autofocus: true,
				tabSize: 2,
				autoCloseTags: true,
				blastCode: { effect: 2 },
			});

editor.setOption("extraKeys", {
// Tab键换成4个空格
Tab: function(cm) {
	var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
	cm.replaceSelection(spaces);
},
// F11键切换全屏
"F11": function(cm) {
	cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
// Esc键退出全屏
"Esc": function(cm) {
	if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
});

htmlgx(editor.getValue());
$(document).ready(function(){
  $("textarea").keydown(function(){
	setTimeout(function(){ htmlgx(editor.getValue()); }, 100);
  });
  $("textarea").bind("paste", function(){
	setTimeout(function(){ htmlgx(editor.getValue()); }, 100);
  })
});

function htmlgx(html){
	var o = document.getElementById("div_Ver");
	ed = document.all ? o.contentWindow.document : o.contentDocument;
	ed.open();
	ed.write(html);
	ed.close();
	ed.contentEditable = true;
	ed.designMode = 'on';
}
</script>
</html>